<template>
  <div class="detail">
    <Swiper :banner="info.pic_list" :height="height" type="detail"/>

    <div class="info">
      <p class="name">{{info.title}}</p>
      <p class="price">￥{{info.price}}</p>
    </div>
    <div class="buy">
      <ProductNumControl key="detail"/>
    </div>
    <div class="introduce">
      <p class="title">商品介绍</p>
      <div class="product-contro" v-html="info.body"></div>
      <div class="mb"></div>
    </div>
    <!-- <ProductDiscount text="一次性购买满10桶水，系统将赠送您1张水票"/> -->
    <ProductSubmitBar :total="total" @handleBuy="handleBuy"/>

    <ProductBuyConfirm
      v-show="showConfirm"
      @handleClose="handleCloseConfirm"
      @toPay="handleToPay"
      :info="info"
      :priview="priview"
    />

    <ServiceArea v-if="showAddress"/>
  </div>
</template>

<script>
import api from "../../api";
import common from "../../api/common";

import Swiper from "@/components/homepage/Swiper";
import ProductDiscount from "@/components/product/ProductDiscount";
import ProductSubmitBar from "@/components/product/ProductSubmitBar";
import ProductNumControl from "@/components/product/ProductNumControl";
import ProductBuyConfirm from "@/components/product/ProductBuyConfirm";

import ServiceArea from "@/components/common/ServiceArea";
import { store } from "../../api/store";
export default {
  title: "商品详情",
  components: {
    Swiper,
    ProductDiscount,
    ProductSubmitBar,
    ProductNumControl,
    ProductBuyConfirm,
    ServiceArea
  },
  data() {
    return {
      id: common.getParam("id"),
      height: 375,
      showConfirm: false,
      showAddress: false,
      info: {},
      priview: ""
    };
  },
  computed: {
    total() {
      let num = this.$store.state.num;
      let total = (num * this.info.price).toFixed(2);
      return total;
    }
  },
  methods: {
    handleBuy() {
      this.showConfirm = true;
    },
    handleCloseConfirm() {
      this.showConfirm = false;
    },
    loadDetail() {
      api.product.detail(this.id, res => {
        this.info = res.info;
        this.priview = res.info.pic_list[0];
      });
    },
    handleToPay() {
      var num = this.$store.state.num;
      var price = this.info.price;
      var total = Number(num) * Number(price);
      console.log(total)
      var id = this.info.id;

      this.$routerPush(this, `/pages/deposit/Pay?total=${total}&id=${id}&num=${num}`)
    }
  },
  mounted() {
    this.loadDetail();
  }
};
</script>

<style lang="less" scoped>
.detail {
  .mb {
    width: 100%;
    height: 18vw;
    background: rgba(0, 0, 0, 0)
  }
  .info {
    border-top: 1px solid #e5e5e5;
    border-bottom: 1px solid #e5e5e5;
    padding: 4.4vw;
    .name {
      font-size: 4.5vw;
      color: #252525;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .price {
      padding-top: 3.466vw;
      font-size: 3.7333vw;
      color: #ff6158;
    }
  }
  .buy {
    padding: 4.4vw;
    border-bottom: 1px solid #e5e5e5;
  }
  .introduce {
    padding: 4.4vw;
    .title {
      font-size: 4.5vw;
      margin-bottom: 2vw;
    }
  }
}

</style>